<script setup>
import Vrouter from "@/router"
const router = Vrouter
import { ref, inject, provide } from 'vue'
import { MYURL } from '@/utils/express/express.js'
import { getfriends } from '@/api/video/video.js'
import { videosubscribe } from '@/api/video/video.js'
import { userStore } from "@/stores/user.js"
const FriendState = userStore()
provide('changeFanOrIdol', (e) => {
    showIdol.value = e
})
const idolList = ref([])
const fanList = ref([])
let idol_who = ref([])
getfriends().then((res) => {
    idol_who.value = []
    for (let i = 0; i < res.data.message.idol.length; i++) {
        idol_who.value.push(false)
    }
    idolList.value = res.data.message.idol
    fanList.value = res.data.message.fans

})
const change_message_state = inject('change_message_state')
const subscribe = (info, index) => {
    let data = {
        account: info.account
    }
    videosubscribe(data).then((res) => {
        if (res.data.status != 1) {
            idol_who.value[index] = !idol_who.value[index]
        }
        change_message_state(res.data.message)
    })
}
const subscribeFan = (info, index) => {
    let data = {
        account: info.account
    }
    videosubscribe(data).then((res) => {
        if (res.data.status != 1) {
            fanList.value[index].same = !fanList.value[index].same
        }
        change_message_state(res.data.message)
    })
}
const cancel = ref(false)
const showIdol = ref(true)
const which_List = ref(true)
which_List.value = FriendState.FriendState
const no_search = ref(true)
let input_composition = false
const serchStart = () => {
    input_composition = true
}
const serch = () => {
    if (input_composition) return
    handleSearch(search_value.value.value)
}
const search_value = ref(null)
const searchEnd = () => {
    input_composition = false
    serch()
}
const searchList = ref([])
const isEmpty = ref(false)
const handleSearch = (queryString) => {
    if (!queryString) return searchList.value = []
    let queryStringArr = queryString.split("")
    let str = "(.*?)"
    let filterMsg = []
    let regStr = str + queryStringArr.join(str) + str
    let reg = RegExp(regStr, "i") // 以mh为例生成的正则表达式为/(.*?)m(.*?)h(.*?)/i
    idolList.value.map(item => {
        if (reg.test(item.username)) {
            filterMsg.push(item)
        }
    })
    if (filterMsg.length === 0) {
        isEmpty.value = true
    } else {
        isEmpty.value = false
    }
    searchList.value = filterMsg
}
const searchCancel = () => {
    cancel.value = false
    no_search.value = true
    searchList.value = []
    search_value.value.value = ''
}
</script>

<template>
    <div class="get-back-main">
        <img class="back-image" src="@/assets/img/getback.png" @click="router.go(-1)">
        <div class="title">
            我的好友
        </div>
        <div class="select-type">
            <p @click="which_List = true" :class="{ color_pink: which_List }">关注</p>
            <p :class="{ color_pink: !which_List }" @click="which_List = false">粉丝</p>
        </div>
    </div>
    <div v-show="which_List" class="idol">
        <div class="search-nav-main">
            <div class="search-nav">
                <img src="@/assets/img/search.png">
                <input ref="search_value" @focus="(cancel = true) && (no_search = false)" @compositionstart="serchStart"
                    @compositionend="searchEnd" @input="serch" placeholder="搜索我的关注" type="text">
            </div>
            <p v-show="cancel" @click="searchCancel" class="search-cancel">取消</p>
        </div>
        <div v-show="no_search">
            <div @click="showIdol = !showIdol" class="group">
                <img :class="{ revent: showIdol }" src="@/assets/img/downrow.png">
                <div>
                    <p>默认分组</p>
                    <p>{{ idolList.length }}</p>
                </div>
            </div>
            <div v-show="showIdol" v-for="(info, index) in idolList" :key="index"
                @click="router.push(`/personal?up=${info.account}`)" class="idol-list">
                <img :src="MYURL + '/public/profiles/' + info.profile">
                <div class="idol-list-mian">
                    <div class="idol-all">
                        <p class="idol-title">{{ info.username }}</p>
                        <p class="idol-about">{{ info.about }}</p>
                    </div>
                    <div @click.stop="subscribe(info, index)" class="idol-right">
                        <p v-if="idol_who[index]"><b style="font-size: 15px;">+</b> 关注</p>
                        <div v-if="!idol_who[index]" class="fan">
                            <img src="@/assets/img/table.png">
                            <p>已关注</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div v-show="!no_search">
        <div v-show="isEmpty">
            <IsEmpty></IsEmpty>
        </div>
        <div v-show="!isEmpty" v-for="(info, index) in searchList" :key="index" class="idol-list">
            <img :src="MYURL + '/public/profiles/' + info.profile">
            <div class="idol-list-mian">
                <div class="idol-all">
                    <p class="idol-title">{{ info.username }}</p>
                    <p class="idol-about">{{ info.about }}</p>
                </div>
            </div>
        </div>
    </div>

    <div v-show="!which_List" class="fans">
        <p class="fanAccount">共 <span style="font-weight: 600;color: black;">{{ fanList.length }}</span> 个粉丝</p>
        <div v-for="(info, index) in fanList" :key="index" @click="router.push(`/personal?up=${info.account}`)"
            class="idol-list">
            <img :src="MYURL + '/public/profiles/' + info.profile">
            <div class="idol-list-mian">
                <div class="idol-all">
                    <p class="idol-title">{{ info.username }}</p>
                    <p class="idol-about">{{ info.about }}</p>
                </div>
                <div @click.stop="subscribeFan(info, index)" class="idol-right">
                    <p v-if="!info.same"><b style="font-size: 15px;">+</b> 回关</p>
                    <div v-if="info.same" class="fan">
                        <img src="@/assets/img/table.png">
                        <p>已互粉</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.get-back-main {
    position: sticky;
}

.revent {
    transform: rotate(180deg);
}

.select-type {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 40%;
    padding-bottom: 8px;
    border-bottom: 1px rgba(0, 0, 0, 0.12) solid;
    color: #8f8f8f;
}

.color_pink {
    color: var(--bilibili-pink);
}

.idol {
    margin-top: 15px;
}

.search-nav-main {
    padding: 0 10px 13px 10px;
    display: flex;
    align-items: center;
}

.search-nav {
    flex: 0.95;
    display: flex;
    padding: 5px 0;
    align-items: center;
    border-radius: 20px;
    background-color: #f4f4f4;

    img {
        margin-left: 5px;
        width: 15px;
    }

    input {
        padding-left: 5px;
        outline: none;
        border: none;
        font-size: 13px;
        width: 90%;
        background-color: #f4f4f4;
    }
}

.search-cancel {
    color: var(--bilibili-pink);
    margin-left: auto;
}

.group {
    border-top: 1px rgba(0, 0, 0, 0.12) solid;
    padding: 10px 10px 15px 10px;
    display: flex;
    gap: 20px;
    align-items: center;
    border-bottom: 1px rgba(0, 0, 0, 0.12) solid;

    img {
        width: 14px;
    }

    >div {
        gap: 5px;
        display: flex;
        align-items: center;

        p:first-child {
            font-size: 14px;
            font-weight: 600;
        }

        p:last-child {
            font-size: 11px;
            color: #9b9b9b;
        }
    }
}

.idol-list {
    overflow: hidden;
    width: 100%;
    margin-top: 5px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;

    >img {
        height: 45px;
        width: 45px;
        border-radius: 50%;
    }

    .idol-list-mian {
        flex: 1;
        display: flex;
        align-items: center;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);

        .idol-all {
            height: 45px;
            display: flex;
            flex-direction: column;
        }

        .idol-title {
            margin-top: 10px;
            width: 60vw;
            font-size: 14px;
            color: #212121;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .idol-about {
            width: 60vw;
            color: #8f8f8f;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
}

.idol-right {
    margin-left: auto;

    >p {
        border: solid 1px var(--bilibili-pink);
        font-size: 13px;
        color: var(--bilibili-pink);
        padding: 1px 15px;
        border-radius: 7px;
    }

    .fan {
        width: 70px;
        height: 30px;
        background-color: #e3e5e7;
        color: #95999f;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 7px;
        gap: 3px;

        p {
            font-size: 13px;
            font-weight: 500;
        }

        img {
            width: 15px;
        }
    }
}

.fanAccount {
    padding: 0 15px 10px 15px;
    color: #929292;
    font-size: 13px;
    margin-top: 10px;
    border-bottom: 1px #e6e6e6 solid;
}
</style>